import type { Role } from "@/types/role";
import { Button } from "../ui/button";
import { sendWSMessage } from "@/api/chat";
import { useConversationStore } from "@/store/useConversationStore";
import { useChatStore } from "@/store/useChatStore";
import type { WSClient } from "@/utils/ws";

export default function RoleSidecard({
  role,
  ws,
}: {
  role: Role;
  ws: WSClient;
}) {
  const { addMessage } = useChatStore();
  const { selectedId } = useConversationStore();
  const handleSkill = async (message: string) => {
    // 添加文本内容
    addMessage({
      id: Date.now().toString(),
      content: [
        {
          type: "text",
          content: message,
        },
      ],
      role: "user",
    });
    await sendWSMessage(ws, {
      message,
      sessionId: Number(selectedId),
      skillId: 0,
    });
  };

  return (
    <div className="ml-auto w-full max-w-sm p-4 bg-white border border-gray-200 rounded-lg shadow">
      <div className="flex items-center justify-center">
        <div className="flex flex-col items-center justify-center">
          <img
            className="w-16 h-16 rounded-full mt-9 mb-5"
            src={role.avatar_url}
            alt={role.name}
          />
          <div className="ml-2 text-center">
            <p className="text-lg font-bold text-gray-900">{role.name}</p>
            <p className="text-sm text-gray-500">{role.description}</p>
            <Button
              onClick={() => handleSkill("讲一个故事吧")}
              className="w-full mt-2"
            >
              讲故事
            </Button>
            <Button
              onClick={() => handleSkill("给我一篇英语文章学习一下吧")}
              className="w-full mt-2"
            >
              学英语
            </Button>
            <Button
              onClick={() => handleSkill("讲一个冷笑话吧")}
              className="w-full mt-2"
            >
              冷笑话
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}
